<template>
  <div class="tag-factory analyse-yrfm">
    <yrfm-config-list ref="factoryConfigList" @clearConfig="clearConfig"></yrfm-config-list>
    <div class="factory-content" v-loading="loading">
      <el-row :gutter="20">
        <el-col :span="6" align="left">
          <div class="factory-top">
            <h2>
              <icon-svg name="iconRole" slot="prefix"></icon-svg>
              YRFM分析
            </h2>
          </div>
        </el-col>
        <el-col :span="18" align="right">
          <div class="btns">
            <el-button @click="clear">
              <icon-svg name="iconCancel"></icon-svg>
              取消
            </el-button>
            <el-button type="primary" @click="handlePreview">
              <icon-svg name="iconFacEye"></icon-svg>
              预览
            </el-button>
            <el-button type="primary" @click="submit">
              <icon-svg name="iconSave"></icon-svg>
              保存
            </el-button>
          </div>
        </el-col>
      </el-row>
      <div class="yrfm-wrapper tag-scrollbar">
        <div class="section-title">
          <i :class="showLogic ? 'el-icon-caret-bottom' : 'el-icon-caret-right'" @click="showLogic = !showLogic"></i>
          YRFM配置
        </div>
        <el-collapse-transition>
          <div class="section-content pie-content" v-show="showLogic">
            <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="0">
              <div class="pie-box">
                <div class="pie-item pie1" @drop="copyDrop($event, 'monetaryWeights')" @dragover="allowDrag($event)">
                  <div class="pie-item-wrap">
                    <span class="line"></span>
                    <div class="item-content">
                      M
                    </div>
                    <div class="item-info">
                      <div class="info-header">
                        <div class="header-title">
                          权重M
                          <el-tooltip
                            effect="dark"
                            content="Monetary： 消费金额，顾客在固定时间内的平均消费贡献，M越大，表示客户对平台的财富贡献越大，越有价值。M最多可支持三个类目，分别为平均消费金额、平均存款金额、平均财富类产品余额"
                            placement="top"
                            popper-class="yrfm-tips"
                          >
                            <i class="el-icon-info"></i>
                          </el-tooltip>
                        </div>
                        <el-form-item prop="monetaryWeights.weights">
                          <el-input-number v-model="editForm.monetaryWeights.weights" :min="0"></el-input-number>
                        </el-form-item>
                      </div>
                      <ul class="info-content">
                        <li v-for="(item, index) in editForm.monetaryWeights.param" :key="item.tagId">
                          <div class="info-title">{{ item.labName }}</div>
                          <el-form-item :prop="'monetaryWeights.param.' + index + '.weights'">
                            <el-input-number v-model="item.weights" :min="0"></el-input-number>
                          </el-form-item>
                          <span class="delete-btn" @click="deleteConfig('monetaryWeights', index)">
                            <i class="el-icon-circle-close"></i>
                          </span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div
                  class="pie-item pie2"
                  @drop="copyDrop($event, 'recencyFrequencyWeights')"
                  @dragover="allowDrag($event)"
                >
                  <div class="pie-item-wrap">
                    <div class="item-content">
                      RF
                    </div>
                    <div class="item-info">
                      <div class="info-header">
                        <div class="header-title">
                          权重RF
                          <el-tooltip
                            effect="dark"
                            content="Redeem Frequency： 赎回次数，客户在固定时间内的赎回次数，RF越小代表用户资金存储越稳定，用户越有价值"
                            placement="top"
                            popper-class="yrfm-tips"
                          >
                            <i class="el-icon-info"></i>
                          </el-tooltip>
                        </div>
                        <el-form-item prop="recencyFrequencyWeights.weights">
                          <el-input-number
                            v-model="editForm.recencyFrequencyWeights.weights"
                            :min="0"
                          ></el-input-number>
                        </el-form-item>
                      </div>
                      <ul class="info-content">
                        <li>
                          <div class="info-title">{{ editForm.recencyFrequencyWeights.labName }}</div>
                          <span
                            class="delete-btn"
                            v-if="editForm.recencyFrequencyWeights.tagId"
                            @click="deleteConfig('recencyFrequencyWeights')"
                          >
                            <i class="el-icon-circle-close"></i>
                          </span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="pie-item pie3" @drop="copyDrop($event, 'recencyWeights')" @dragover="allowDrag($event)">
                  <div class="pie-item-wrap">
                    <div class="item-content">
                      R
                    </div>
                    <div class="item-info">
                      <div class="info-header">
                        <div class="header-title">
                          权重R
                          <el-tooltip
                            effect="dark"
                            content="Frequency： 消费频率，客户在固定时间内的投资次数，F越大，表示客户交易越频繁，对企业越忠诚"
                            placement="top"
                            popper-class="yrfm-tips"
                          >
                            <i class="el-icon-info"></i>
                          </el-tooltip>
                        </div>
                        <el-form-item prop="recencyWeights.weights">
                          <el-input-number v-model="editForm.recencyWeights.weights" :min="0"></el-input-number>
                        </el-form-item>
                      </div>
                      <ul class="info-content">
                        <li>
                          <div>{{ editForm.recencyWeights.labName }}</div>
                          <span
                            class="delete-btn"
                            v-if="editForm.recencyWeights.tagId"
                            @click="deleteConfig('recencyWeights')"
                          >
                            <i class="el-icon-circle-close"></i>
                          </span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="pie-item pie4" @drop="copyDrop($event, 'frequencyWeights')" @dragover="allowDrag($event)">
                  <div class="pie-item-wrap">
                    <div class="item-content">
                      F
                    </div>
                    <div class="item-info">
                      <div class="info-header">
                        <div class="header-title">
                          权重F
                          <el-tooltip
                            effect="dark"
                            content="Recency： 近一次消费时间，客户最近一次消费时间与当前时间的间隔，R越小，表示客户越活跃，对企业越忠诚"
                            placement="top"
                            popper-class="yrfm-tips"
                          >
                            <i class="el-icon-info"></i>
                          </el-tooltip>
                        </div>
                        <el-form-item prop="frequencyWeights.weights">
                          <el-input-number v-model="editForm.frequencyWeights.weights" :min="0"></el-input-number>
                        </el-form-item>
                      </div>
                      <ul class="info-content">
                        <li>
                          <div class="info-title">{{ editForm.frequencyWeights.labName }}</div>
                          <span
                            class="delete-btn"
                            v-if="editForm.frequencyWeights.tagId"
                            @click="deleteConfig('frequencyWeights')"
                          >
                            <i class="el-icon-circle-close"></i>
                          </span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </el-form>
          </div>
        </el-collapse-transition>
        <div class="section-title">
          <i :class="showResult ? 'el-icon-caret-bottom' : 'el-icon-caret-right'" @click="showResult = !showResult"></i>
          结果预览
        </div>
        <el-collapse-transition>
          <div class="section-content" v-show="showResult">
            <div class="yrfm-resut">
              <ul>
                <li class="result-top">
                  <el-row>
                    <el-col :span="12" align="center">序号</el-col>
                    <el-col :span="12" align="center">数值</el-col>
                  </el-row>
                </li>
                <li
                  v-for="(item, index) in editForm.previewResults"
                  :key="index"
                  :class="{ stripe: (index + 1) % 2 == 0 }"
                >
                  <el-row>
                    <el-col :span="12" align="center">{{ index + 1 }}</el-col>
                    <el-col :span="12" align="center">{{ item }}</el-col>
                  </el-row>
                </li>
              </ul>
            </div>
          </div>
        </el-collapse-transition>
      </div>
    </div>
    <yrfm-drawer ref="yrfmDrawer" @callback="setConfig"></yrfm-drawer>
  </div>
</template>

<script>
import yrfmConfigList from './components/yrfm-config-list'
import yrfmDrawer from './components/yrfm-drawer'
import cloneDeep from 'lodash/cloneDeep'
export default {
  components: {
    yrfmConfigList,
    yrfmDrawer
  },
  data() {
    return {
      loading: false,
      showLogic: true,
      showResult: false,
      oldConfig: {},
      editForm: {
        tagId: '',
        groupId: '',
        rfmAnalysisName: '',
        description: '',
        isTemplateStatus: 0,
        analysisTemplateId: '',
        analysisTemplateParam: '',
        frequencyWeights: {
          isDerived: '',
          labTable: '',
          labColumn: '',
          tagId: '',
          labName: '',
          weights: ''
        },
        recencyWeights: {
          isDerived: '',
          labTable: '',
          labColumn: '',
          tagId: '',
          labName: '',
          weights: ''
        },
        monetaryWeights: {
          param: [],
          weights: ''
        },
        recencyFrequencyWeights: {
          isDerived: '',
          labTable: '',
          labColumn: '',
          tagId: '',
          labName: '',
          weights: ''
        },
        execFrequency: '',
        execDtList: [],
        execWkList: [],
        execTm: '',
        previewResults: []
      },
      editFormRules: {
        'frequencyWeights.weights': [{ required: true, message: '权重不能为空', trigger: 'blur' }],
        'recencyWeights.weights': [{ required: true, message: '权重不能为空', trigger: 'blur' }],
        'monetaryWeights.weights': [{ required: true, message: '权重不能为空', trigger: 'blur' }],
        'recencyFrequencyWeights.weights': [{ required: true, message: '权重不能为空', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$route.query.tagId) {
        this.editForm.tagId = this.$route.query.tagId
        this.getDetail()
      }
      if (this.$route.query.groupId) this.editForm.groupId = this.$route.query.groupId
    })
  },
  methods: {
    getDetail() {
      this.$ajax({
        url: this.$ajax.setUrl(`rfmAnalysis/selectRfmAnalysisById/${this.editForm.tagId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.editForm.rfmAnalysisName = data.data.rfmAnalysisName
          this.editForm.description = data.data.description
          this.editForm.isTemplateStatus = data.data.isTemplateStatus
          this.editForm.analysisTemplateId = data.data.analysisTemplateId || ''
          this.editForm.analysisTemplateParam = data.data.analysisTemplateParam
          this.editForm.execFrequency = data.data.execFrequency
          this.editForm.execDtList = JSON.parse(data.data.execDtList)
          this.editForm.execWkList = JSON.parse(data.data.execWkList)
          this.editForm.execTm = data.data.execTm
          this.editForm.previewResults = JSON.parse(data.data.previewResults)
          const rfmAnalysisParam = JSON.parse(data.data.rfmAnalysisParam)
          this.editForm.frequencyWeights = rfmAnalysisParam.frequencyWeights
          this.editForm.recencyWeights = rfmAnalysisParam.recencyWeights
          this.editForm.monetaryWeights = rfmAnalysisParam.monetaryWeights
          this.editForm.recencyFrequencyWeights = rfmAnalysisParam.recencyFrequencyWeights
          if (rfmAnalysisParam.catalogClassId)
            this.$refs.factoryConfigList.changeCatalogClass(rfmAnalysisParam.catalogClassId)
          this.showLogic = false
          this.showResult = true
          this.oldConfig = cloneDeep(this.editForm)
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    allowDrag(event) {
      event.preventDefault()
    },
    copyDrop(event, field) {
      event.preventDefault()
      let tagId = event.dataTransfer.getData('tagId')
      if (!tagId) return
      let tagNm = event.dataTransfer.getData('tagNm')
      let labTbl = event.dataTransfer.getData('labTbl')
      let labFldMap = event.dataTransfer.getData('labFldMap')
      let isDerLabel = event.dataTransfer.getData('isDerLabel')
      if (field === 'monetaryWeights') {
        // M
        if (this.editForm[field].param.length >= 3) {
          this.$message.info('配置不能超过三条！')
          return
        }
        if (this.editForm[field].param.find(item => item.tagId === tagId)) {
          this.$message.info(`已添加【${tagNm}】！`)
          return
        }
        let arg = {
          isDerived: isDerLabel,
          labTable: labTbl,
          labColumn: labFldMap,
          tagId: tagId,
          labName: tagNm,
          weights: ''
        }
        this.editForm[field].param.push(arg)
      } else {
        this.editForm[field].tagId = tagId
        this.editForm[field].labName = tagNm
        this.editForm[field].labTable = labTbl
        this.editForm[field].labColumn = labFldMap
        this.editForm[field].isDerived = isDerLabel
      }
    },
    deleteConfig(field, index) {
      if (field == 'monetaryWeights') {
        this.editForm.monetaryWeights.param.splice(index, 1)
      } else {
        this.editForm[field].tagId = ''
        this.editForm[field].labName = ''
        this.editForm[field].labTable = ''
        this.editForm[field].labColumn = ''
        this.editForm[field].isDerived = ''
      }
    },
    handlePreview() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          if (!this.editForm.monetaryWeights.param.length) {
            this.$message.info('权重M必须配置！')
            return
          }
          if (!this.editForm.recencyWeights.tagId) {
            this.$message.info('权重R必须配置！')
            return
          }
          if (!this.editForm.frequencyWeights.tagId) {
            this.$message.info('权重F必须配置！')
            return
          }
          this.loading = true
          this.$ajax({
            url: this.$ajax.setUrl('rfmAnalysis/previewAnalysisResult'),
            method: 'post',
            data: this.$ajax.setData({
              rfmAnalysisParam: JSON.stringify({
                frequencyWeights: this.editForm.frequencyWeights,
                recencyWeights: this.editForm.recencyWeights,
                monetaryWeights: this.editForm.monetaryWeights,
                recencyFrequencyWeights: this.editForm.recencyFrequencyWeights
              })
            })
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.showLogic = false
              this.showResult = true
              this.editForm.previewResults = data.data || []
              this.oldConfig = cloneDeep(this.editForm)
              this.$message.success(data.msg)
            } else {
              this.$message.error(data.data || data.msg)
            }
            this.loading = false
          })
        }
      })
    },
    setConfig(data) {
      this.editForm.tagId = data.tagId
      this.editForm.rfmAnalysisName = data.rfmAnalysisName
      this.editForm.description = data.description
      this.editForm.isTemplateStatus = data.isTemplateStatus
      this.editForm.analysisTemplateId = data.analysisTemplateId
      this.editForm.analysisTemplateParam = data.analysisTemplateParam
      this.editForm.execFrequency = data.execFrequency
      this.editForm.execDtList = data.execDtList
      this.editForm.execWkList = data.execWkList
      this.editForm.execTm = data.execTm
      this.oldConfig = cloneDeep(this.editForm)
    },
    submit() {
      if (!this.$utils.compareObject(this.oldConfig, this.editForm)) {
        this.$message.info('逻辑配置有变化，请先预览再保存！')
        return
      }
      this.$refs.editForm.validate(valid => {
        if (valid) {
          let params = {
            rfmAnalysisName: this.editForm.rfmAnalysisName,
            description: this.editForm.description,
            isTemplateStatus: this.editForm.isTemplateStatus,
            analysisTemplateId: this.editForm.analysisTemplateId,
            analysisTemplateParam: this.editForm.analysisTemplateParam,
            execFrequency: this.editForm.execFrequency,
            execDtList: this.editForm.execDtList,
            execWkList: this.editForm.execWkList,
            execTm: this.editForm.execTm,
            previewResults: JSON.stringify(this.editForm.previewResults),
            rfmAnalysisParam: JSON.stringify({
              catalogClassId: this.$refs.factoryConfigList.getCatalogClass(),
              frequencyWeights: this.editForm.frequencyWeights,
              recencyWeights: this.editForm.recencyWeights,
              monetaryWeights: this.editForm.monetaryWeights,
              recencyFrequencyWeights: this.editForm.recencyFrequencyWeights
            })
          }
          if (this.editForm.tagId) params.tagId = this.editForm.tagId
          if (this.editForm.groupId) params.groupId = this.editForm.groupId
          this.$refs.yrfmDrawer.showDrawer(params)
        }
      })
    },
    clearConfig() {
      this.editForm.isTemplateStatus = 0
      this.editForm.analysisTemplateParam = ''
      this.editForm.frequencyWeights = {
        isDerived: '',
        labTable: '',
        labColumn: '',
        tagId: '',
        labName: '',
        weights: ''
      }
      this.editForm.monetaryWeights = {
        param: [],
        weights: ''
      }
      this.editForm.recencyFrequencyWeights = {
        isDerived: '',
        labTable: '',
        labColumn: '',
        tagId: '',
        labName: '',
        weights: ''
      }
      this.editForm.recencyWeights = {
        isDerived: '',
        labTable: '',
        labColumn: '',
        tagId: '',
        labName: '',
        weights: ''
      }
      this.editForm.previewResults = []
      this.showLogic = true
      this.showResult = false
    },
    clear() {
      this.$confirm('确定取消最新配置？').then(() => {
        const config = cloneDeep(this.oldConfig)
        if (config.tagId) {
          this.editForm.rfmAnalysisName = config.rfmAnalysisName
          this.editForm.description = config.description
          this.editForm.isTemplateStatus = config.isTemplateStatus
          this.editForm.analysisTemplateId = config.analysisTemplateId
          this.editForm.analysisTemplateParam = config.analysisTemplateParam
          this.editForm.execFrequency = config.execFrequency
          this.editForm.execDtList = config.execDtList
          this.editForm.execWkList = config.execWkList
          this.editForm.execTm = config.execTm
          this.editForm.frequencyWeights = config.frequencyWeights
          this.editForm.monetaryWeights = config.monetaryWeights
          this.editForm.recencyFrequencyWeights = config.recencyFrequencyWeights
          this.editForm.recencyWeights = config.recencyWeights
          this.editForm.previewResults = config.previewResults
        } else {
          this.editForm.rfmAnalysisName = ''
          this.editForm.description = ''
          this.editForm.isTemplateStatus = 0
          this.editForm.analysisTemplateId = ''
          this.editForm.analysisTemplateParam = ''
          this.editForm.execFrequency = ''
          this.editForm.execDtList = []
          this.editForm.execWkList = []
          this.editForm.execTm = ''
          this.editForm.frequencyWeights = {
            isDerived: '',
            labTable: '',
            labColumn: '',
            tagId: '',
            labName: '',
            weights: ''
          }
          this.editForm.monetaryWeights = {
            param: [],
            weights: ''
          }
          this.editForm.recencyFrequencyWeights = {
            isDerived: '',
            labTable: '',
            labColumn: '',
            tagId: '',
            labName: '',
            weights: ''
          }
          this.editForm.recencyWeights = {
            isDerived: '',
            labTable: '',
            labColumn: '',
            tagId: '',
            labName: '',
            weights: ''
          }
          this.editForm.previewResults = []
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import '../factory/factory.scss';
.analyse-yrfm {
  $yfrm-blue: #3ab2d0;
  $yfrm-green: #45bf7b;
  $yfrm-orange: #f9ab0b;
  $yfrm-red: #fd7037;
  .factory-top {
    line-height: 50px;
    color: $theme-color;
    svg {
      margin-right: 10px;
    }
  }
  .factory-content {
    background-color: #fff;
  }
  .yrfm-wrapper {
    height: calc(100% - 60px);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .section-title {
    font-size: 18px;
    font-weight: bold;
    height: 80px;
    padding: 20px;
    line-height: 40px;
    color: #1e3592;
    background-color: #c0d2f6;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .section-content {
    margin-bottom: 10px;
    border: 1px solid #f5f6f7;
    & + .section-title {
      margin-top: 10px;
    }
  }
  .pie-content {
    padding: 50px;
  }
  .pie-box {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    position: relative;
  }
  .pie-item {
    width: 0;
    height: 0;
    border-radius: 50%;
    transform: rotate(-45deg);
    position: absolute;
  }
  .pie1 {
    border-top: 150px solid $yfrm-blue;
    border-right: 150px solid transparent;
    border-bottom: 150px solid transparent;
    border-left: 150px solid transparent;
    top: -1px;
    left: -1px;
    .pie-item-wrap {
      top: -150px;
      left: -50px;
    }
    .item-info {
      background-color: $yfrm-blue;
      top: -50px;
      left: -450px;
    }
    &:before,
    &:after {
      width: 100px;
      height: 1px;
      content: '';
      background-color: $yfrm-blue;
      position: absolute;
    }
    &:before {
      top: -280px;
      left: -140px;
      transform: rotate(45deg);
    }
    &:after {
      top: -195px;
      left: -105px;
      transform: rotate(90deg);
    }
  }
  .pie2 {
    border-top: 150px solid transparent;
    border-right: 150px solid $yfrm-green;
    border-bottom: 150px solid transparent;
    border-left: 150px solid transparent;
    top: -1px;
    left: 1px;
    .pie-item-wrap {
      top: -50px;
      right: -150px;
    }
    .item-info {
      background-color: $yfrm-green;
      top: -20px;
      right: -450px;
    }
    &:before,
    &:after {
      width: 100px;
      height: 1px;
      content: '';
      background-color: $yfrm-green;
      position: absolute;
    }
    &:before {
      top: 95px;
      right: -320px;
      transform: rotate(45deg);
    }
    &:after {
      width: 95px;
      top: 60px;
      right: -235px;
    }
  }
  .pie3 {
    border-top: 150px solid transparent;
    border-right: 150px solid transparent;
    border-bottom: 150px solid transparent;
    border-left: 150px solid $yfrm-red;
    bottom: -1px;
    left: -1px;
    .pie-item-wrap {
      bottom: -50px;
      left: -150px;
    }
    .item-content {
      margin-top: 20px;
    }
    .item-info {
      background-color: $yfrm-red;
      bottom: -50px;
      left: -450px;
    }
    &:before,
    &:after {
      width: 100px;
      height: 1px;
      content: '';
      background-color: $yfrm-orange;
      position: absolute;
    }
    &:before {
      top: 285px;
      right: -135px;
      transform: rotate(45deg);
    }
    &:after {
      width: 100px;
      top: 200px;
      right: -91px;
      transform: rotate(-100deg);
    }
  }
  .pie4 {
    border-top: 150px solid transparent;
    border-right: 150px solid transparent;
    border-bottom: 150px solid $yfrm-orange;
    border-left: 150px solid transparent;
    bottom: -1px;
    right: -1px;
    .pie-item-wrap {
      bottom: -150px;
      right: -50px;
    }
    .item-content {
      margin-top: 20px;
    }
    .item-info {
      background-color: $yfrm-orange;
      bottom: -50px;
      right: -450px;
    }
    &:before,
    &:after {
      width: 100px;
      height: 1px;
      content: '';
      background-color: $yfrm-red;
      position: absolute;
    }
    &:before {
      top: -80px;
      right: 240px;
      transform: rotate(45deg);
    }
    &:after {
      width: 105px;
      top: -31px;
      right: 151px;
      transform: rotate(15deg);
    }
  }
  .pie-item-wrap {
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    position: absolute;
  }
  .item-content {
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-top: 40px;
  }
  .item-info {
    width: 250px;
    padding: 10px 3px 3px 3px;
    line-height: 30px;
    border-radius: 4px;
    position: absolute;
    .info-header {
      font-size: 17px;
      font-weight: bold;
      padding: 0 20px 0 10px;
      display: flex;
      .header-title {
        color: #fff;
        flex: 1;
      }
    }
    .el-input-number {
      width: 80px;
      line-height: 30px;
      .el-input-number__decrease,
      .el-input-number__increase {
        display: none;
      }
      .el-input__inner {
        height: 30px;
        line-height: 30px;
        padding-left: 0;
        padding-right: 0;
      }
    }
    .el-form-item {
      margin-bottom: 0;
    }
    .el-form-item__content {
      line-height: 30px;
    }
    .el-form-item__error {
      white-space: nowrap;
      top: calc(100% - 22px);
      left: calc(100% + 20px);
    }
    .info-content {
      margin-top: 10px;
      min-height: 40px;
      padding-right: 10px;
      background-color: #f5f9f9;
      overflow: hidden;
      li {
        font-size: 15px;
        display: flex;
        padding: 5px 10px;
        height: 40px;
        line-height: 30px;
        position: relative;
        .info-title {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        & + li {
          border-top: 1px solid #ddd;
        }
        .delete-btn {
          color: $yfrm-blue;
          position: absolute;
          right: -50px;
          opacity: 0;
          cursor: pointer;
          transition: all linear 0.3s;
        }
        &:hover .delete-btn {
          right: -8px;
          opacity: 1;
        }
      }
    }
  }
  .yrfm-resut {
    width: 500px;
    margin: 20px auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    li {
      line-height: 40px;
      &.stripe {
        background-color: #f9f9f9;
      }
    }
    .result-top {
      font-weight: bold;
      background-color: #f9f9f9;
      border-bottom: 1px solid #ddd;
    }
  }
}
</style>
